<template>
  <view>
    <yy-paging v-model="dataList" @query="queryList" ref="paging" :auto="automatic" @scroll="scroll" :refresher-enabled="false">
      <template #top>
        <u-navbar
          back-text=""
          :is-back="true"
          :title="navTitle"
          :background="{ backgroundColor: isScroll ? '#FFFFFF' : 'transparent' }"
          :border-bottom="false"
          :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
        >
        </u-navbar>
      </template>
      <view class="flex flex-col gap-2 p-4">
        <text class="text-[#171B24] font-medium text-2xl">{{ title }}</text>
        <view class="py-2"></view>
        <!-- 钓点名称 -->
        <view class="rounded-[8px] bg-white flex justify-between p-4 items-center gap-4">
          <input type="text" class="text-[15px] flex-1 text-[#171B24] font-medium" placeholder="钓点名称" maxlength="15" v-model="form.name" />
          <text class="text-[12px] text-[#C1C4C9] font-medium">{{ form.name.length }}/15</text>
        </view>
        <!-- 钓点位置 -->
        <view class="rounded-[8px] bg-white p-4 flex flex-col gap-4">
          <view class="flex justify-between items-center">
            <view class="text-[14px] text-[#171B24] font-medium">钓点位置</view>
            <view class="flex items-center bg-[#F4F6F8] rounded-[12px] py-1 px-2" @click="openMap">
              <image src="/static/icoc_positioning.png" mode="scaleToFill" class="size-[16px]" />
              <view class="text-[12px] text-[#C1C4C9] font-medium"> 添加钓点位置 </view>
              <image src="/static/iconRightFill.png" mode="scaleToFill" class="size-[16px]" />
            </view>
          </view>
          <view class="flex items-center gap-2 h-[88px] *:h-full">
            <view class="bg-[#F4F6F8] rounded-[8px] w-[66px] flex justify-center items-center relative !overflow-hidden">
              <video :src="form.video" v-if="form.video" class="size-full"></video>
              <image src="/static/iconAddGr@3X.png" @click="videoUpload" v-else class="size-[28px]" mode="scaleToFill" />
              <view
                v-if="form.video"
                @click="deleteVideo(0)"
                class="w-[20px] h-[20px] bg-[#000000]/40 rounded-[0px_8px_0px_8px] absolute right-0 top-0 flex justify-center items-center"
              >
                <u-icon name="close" color="#fff" size="20"></u-icon>
              </view>
              <view class="w-full h-[18px] bg-[#000000] flex items-center justify-center absolute bottom-0 left-0 z-50">
                <view class="font-medium text-[10px] text-[#FFFFFF]"> 视频指路 </view>
              </view>
            </view>
            <view class="bg-[#F4F6F8] rounded-[8px] flex-1"> </view>
          </view>
        </view>
        <!-- 钓点描述 -->
        <view class="rounded-[8px] bg-white p-4 flex flex-col gap-4">
          <view class="flex flex-col gap-1">
            <textarea placeholder="描述一下钓点特色、出鱼时间等" auto-height class="w-full" maxlength="200" v-model="form.description"></textarea>
            <view class="flex justify-between">
              <view></view>
              <view class="font-medium text-[12px] text-[#C1C4C9]"> {{ form.description.length }}/200 </view>
            </view>
          </view>
          <view class="border-t"></view>
          <view class="grid grid-cols-4 gap-2">
            <view class="aspect-square bg-[#F4F6F8] overflow-hidden rounded-[8px] col-span-1 relative flex justify-center items-center">
              <view class="w-[32px] h-[16px] bg-[#00A9AB] rounded-[8px_0px_8px_0px] flex justify-center items-center absolute top-0 left-0 z-50">
                <view class="text-[10px] text-[#FFFFFF]"> 封面 </view>
              </view>
              <image :src="form.images[0]" mode="scaleToFill" class="size-full" v-if="form.images[0]" />
              <image src="/static/ico_CoverImage@3X.png" @click="uploads(0)" class="size-[24px]" alt="" v-else />

              <view
                v-if="form.images[0]"
                @click="deleteImage(0)"
                class="w-[20px] h-[20px] bg-[#000000]/40 rounded-[0px_8px_0px_8px] absolute right-0 top-0 flex justify-center items-center"
              >
                <u-icon name="close" color="#fff" size="20"></u-icon>
              </view>
            </view>
            <view class="aspect-square bg-[#F4F6F8] overflow-hidden rounded-[8px] col-span-1 relative flex justify-center items-center">
              <view class="w-[42px] h-[16px] bg-[#171B24] rounded-[8px_0px_8px_0px] flex justify-center items-center absolute top-0 left-0 z-50">
                <view class="text-[10px] text-[#FFFFFF]"> 环境图 </view>
              </view>

              <image :src="form.images[1]" mode="scaleToFill" class="size-full" v-if="form.images[1]" />
              <image src="/static/ico_EnvironmentDiagram@3X.png" @click="uploads(1)" class="size-[24px]" alt="" v-else />

              <view
                v-if="form.images[1]"
                @click="deleteImage(1)"
                class="w-[20px] h-[20px] bg-[#000000]/40 rounded-[0px_8px_0px_8px] absolute right-0 top-0 flex justify-center items-center"
              >
                <u-icon name="close" color="#fff" size="20"></u-icon>
              </view>
            </view>
            <view class="aspect-square bg-[#F4F6F8] overflow-hidden rounded-[8px] col-span-1 relative flex justify-center items-center">
              <view class="w-[42px] h-[16px] bg-[#171B24] rounded-[8px_0px_8px_0px] flex justify-center items-center absolute top-0 left-0 z-50">
                <view class="text-[10px] text-[#FFFFFF]"> 渔获图 </view>
              </view>
              <image :src="form.images[2]" mode="scaleToFill" class="size-full" v-if="form.images[2]" />
              <image src="/static/ico_FishingMap@2X.png" @click="uploads(2)" class="size-[24px]" alt="" v-else />

              <view
                v-if="form.images[2]"
                @click="deleteImage(2)"
                class="w-[20px] h-[20px] bg-[#000000]/40 rounded-[0px_8px_0px_8px] absolute right-0 top-0 flex justify-center items-center"
              >
                <u-icon name="close" color="#fff" size="20"></u-icon>
              </view>
            </view>
            <view class="bg-[#F4F6F8] rounded-[8px] aspect-square flex justify-center items-center relative border">
              <view @click="uploads" class="bg-[#F4F6F8] rounded-[8px] aspect-square flex justify-center items-center">
                <image src="/static/iconAddGr@3X.png" class="size-[28px]" mode="scaleToFill" />
              </view>
              <!-- <view class="w-[20px] h-[20px] bg-[#000000]/40 rounded-[0px_8px_0px_8px] absolute right-0 top-0 flex justify-center items-center">
                <u-icon name="close" color="#fff" size="20"></u-icon>
              </view> -->
            </view>
          </view>
        </view>
        <!-- 可钓鱼种 -->
        <view class="rounded-[8px] bg-white flex justify-between p-4 items-center gap-4" @click="showFishSpecies = true">
          <view class="text-[14px] text-[#171B24] font-medium flex-none">可钓鱼种</view>
          <view class="w-[80%] flex items-center justify-between">
            <view class="text-[13px] text-[#171B24] overflow-hidden text-right flex-1">
              <text v-for="(i, k) in form.fish_species" :key="k">{{ getNameById('fish_species', i) }} , </text>
            </view>
            <image src="/static/iconRightGr@3X.png" mode="scaleToFill" class="size-[16px] flex-none" />
          </view>
        </view>
        <!-- 作钓类型 -->
        <view class="rounded-[8px] bg-white flex justify-between p-4 items-center gap-4" @click="showType = true">
          <view class="text-[14px] text-[#171B24] font-medium flex-none">作钓类型</view>
          <view class="w-[80%] flex items-center justify-between">
            <view class="text-[13px] text-[#171B24] overflow-hidden text-right flex-1"> {{ getNameById('fish_type', form.fish_type) }} </view>
            <image src="/static/iconRightGr@3X.png" mode="scaleToFill" class="size-[16px] flex-none" />
          </view>
        </view>

        <view class="rounded-[8px] bg-white p-4 flex flex-col gap-6">
          <!-- 建议钓组 -->
          <view class="flex justify-between items-center" @click="showFishingTeam = true">
            <view class="text-[14px] text-[#171B24] font-medium flex-none">建议钓组</view>
            <view class="w-[80%] flex items-center justify-between">
              <view class="text-[13px] text-[#171B24] overflow-hidden text-right flex-1"> {{ getNameById('fish_group', form.fish_group) }} </view>
              <image src="/static/iconRightGr@3X.png" mode="scaleToFill" class="size-[16px] flex-none" />
            </view>
          </view>

          <!-- 建议用饵 -->
          <view class="flex justify-between items-center" @click="showBait = true">
            <view class="text-[14px] text-[#171B24] font-medium flex-none">建议用饵</view>
            <view class="w-[80%] flex items-center justify-between">
              <view class="text-[13px] text-[#171B24] overflow-hidden text-right flex-1"> {{ getNameById('bait_name', form.bait_name) }} </view>
              <image src="/static/iconRightGr@3X.png" mode="scaleToFill" class="size-[16px] flex-none" />
            </view>
          </view>
        </view>
      </view>
      <template #bottom>
        <view class="px-4 py-3 bg-white rounded-t-[16px]">
          <view class="flex justify-center">
            <view class="h-[44px] bg-[#00A9AB] w-full rounded-full flex items-center justify-center" @click="release">
              <text class="text-[16px] text-[#E5F6F6]">发布</text>
            </view>
          </view>
        </view>
      </template>
    </yy-paging>

    <!-- 鱼种弹框 -->
    <yy-modal v-model="showFishSpecies" title="鱼种" @reset="fishSpeciesReset" @submit="showFishSpecies = false">
      <view class="flex flex-col gap-3">
        <view class="flex text-[14px] text-[#171B24] justify-between">
          <view> 钓点可钓鱼种</view>
          <view class="flex gap-1 items-center" @click="editingOptions('fish_species')">
            <image src="/static/icon_bianhji.png" mode="scaleToFill" class="size-[16px]" />
            <view class="text-[13px] text-[#919499]"> 编辑 </view>
          </view>
        </view>
        <view class="grid grid-cols-3 gap-3">
          <view
            class="col-span-1 flex justify-center items-center rounded-[18px] p-2 border border-solid relative"
            v-for="(i, k) in getBasanOptionData.fish_species"
            :key="k"
            :class="isSelected('fish_species', k) ? 'text-[#00A9AB] bg-[#E5F6F6] border-[#00A9AB]' : 'text-[#171B24] bg-[#F4F6F8] border-transparent'"
            @click="toggleMultiSelect('fish_species', k, i.id)"
          >
            <view
              class="flex absolute -top-1 -right-1 justify-end px-1 leading-none"
              v-if="i.user_id && i.isSelected"
              @click.stop="deleteBasanOption(i.id, 'fish_species')"
            >
              <u-icon name="close" color="#919499" class="" size="22"></u-icon>
            </view>
            <text class="text-[12px] line-clamp-1">{{ i.name }}</text>
          </view>
        </view>
        <!--  
        
        <view class="flex gap-1 items-center" @click="editingOptions('fish_species')">
            <image src="/static/icon_bianhji.png" mode="scaleToFill" class="size-[16px]" />
            <view class="text-[13px] text-[#919499]"> 编辑 </view>
          </view>
           -->
        <!-- 
        <view
              class="flex absolute -top-1 -right-1 justify-end px-1 leading-none"
              v-if="i.user_id && i.isSelected"
              @click.stop="deleteBasanOption(i.id, 'fish_species')"
            >
             <u-icon name="close" color="#919499" class="" size="22"></u-icon>
             </view> 
            -->
        <!-- @click="add('添加鱼种名称', 'fish_species')" -->
        <view class="flex justify-between items-center">
          <view class="flex text-[14px] text-[#171B24]"> 钓点可钓鱼种 </view>
        </view>
        <view class="flex flex-wrap gap-3 items-center">
          <view class="flex justify-center items-center rounded-[18px] px-3 py-2 bg-[#F4F6F8]" @click="add('添加鱼种名称', 'fish_species')">
            <u-icon name="plus" color="#919499" size="26"></u-icon>
          </view>
        </view>
      </view>
    </yy-modal>

    <!-- 作钓类型弹框 -->
    <yy-modal v-model="showType" title="作钓类型" @reset="resetFishingType" @submit="showType = false">
      <view class="flex flex-col gap-3">
        <view class="flex text-[14px] text-[#171B24] justify-between">
          <view> 建议作钓类型</view>

          <view class="flex gap-1 items-center" @click="editingOptions('fish_type')">
            <image src="/static/icon_bianhji.png" mode="scaleToFill" class="size-[16px]" />
            <view class="text-[13px] text-[#919499]"> 编辑 </view>
          </view>
        </view>
        <view class="grid grid-cols-4 gap-3">
          <view
            class="col-span-1 flex justify-center items-center rounded-[18px] p-2 border border-solid relative"
            v-for="(i, k) in getBasanOptionData.fish_type"
            :key="k"
            :class="isSelected('fish_type', k) ? 'text-[#00A9AB] bg-[#E5F6F6] border-[#00A9AB]' : 'text-[#171B24] bg-[#F4F6F8] border-transparent'"
            @click="toggleMultiSelect('fish_type', k, i.id)"
          >
            <view
              class="flex absolute -top-1 -right-1 justify-end px-1 leading-none"
              v-if="i.user_id && i.isSelected"
              @click.stop="deleteBasanOption(i.id, 'fish_type')"
            >
              <u-icon name="close" color="#919499" class="" size="22"></u-icon>
            </view>

            <text class="text-[12px] line-clamp-1">{{ i.name }}</text>
          </view>
        </view>
        <view class="flex justify-between items-center">
          <view class="flex text-[14px] text-[#171B24]"> 自定义 </view>
          <!-- <view class="flex gap-1 items-center">
            <image src="/static/icon_bianhji.png" mode="scaleToFill" class="size-[16px]" />
            <view class="text-[13px] text-[#919499]"> 编辑 </view>
          </view> -->
        </view>
        <view class="flex flex-wrap gap-3 items-center">
          <view class="flex justify-center items-center rounded-[18px] px-3 py-2 bg-[#F4F6F8]" @click="add('添加作钓类型', 'fish_type')">
            <u-icon name="plus" color="#919499" size="26"></u-icon>
          </view>
        </view>
      </view>
    </yy-modal>
    <!--建议钓组弹框 -->

    <yy-modal v-model="showFishingTeam" title="建议钓组" @reset="resetFishingGroup" @submit="showFishingTeam = false">
      <view class="flex flex-col gap-3">
        <view class="flex text-[14px] text-[#171B24] justify-between">
          <view> 建议钓组</view>

          <view class="flex gap-1 items-center" @click="editingOptions('fish_group')">
            <image src="/static/icon_bianhji.png" mode="scaleToFill" class="size-[16px]" />
            <view class="text-[13px] text-[#919499]"> 编辑 </view>
          </view>
        </view>
        <view class="grid grid-cols-4 gap-3">
          <view
            class="col-span-1 flex justify-center items-center rounded-[18px] p-2 border border-solid relative"
            v-for="(i, k) in getBasanOptionData.fish_group"
            :key="k"
            :class="isSelected('fish_group', k) ? 'text-[#00A9AB] bg-[#E5F6F6] border-[#00A9AB]' : 'text-[#171B24] bg-[#F4F6F8] border-transparent'"
            @click="toggleMultiSelect('fish_group', k, i.id)"
          >
            <view
              class="flex absolute -top-1 -right-1 justify-end px-1 leading-none"
              v-if="i.user_id && i.isSelected"
              @click.stop="deleteBasanOption(i.id, 'fish_group')"
            >
              <u-icon name="close" color="#919499" class="" size="22"></u-icon>
            </view>

            <text class="text-[12px] line-clamp-1">{{ i.name }}</text>
          </view>
        </view>
        <view class="flex justify-between items-center">
          <view class="flex text-[14px] text-[#171B24]"> 自定义 </view>
          <!-- <view class="flex gap-1 items-center">
            <image src="/static/icon_bianhji.png" mode="scaleToFill" class="size-[16px]" />
            <view class="text-[13px] text-[#919499]"> 编辑 </view>
          </view> -->
        </view>
        <view class="flex flex-wrap gap-3 items-center">
          <view class="flex justify-center items-center rounded-[18px] px-3 py-2 bg-[#F4F6F8]" @click="add('添加建议钓组', 'fish_group')">
            <u-icon name="plus" color="#919499" size="26"></u-icon>
          </view>
        </view>
      </view>
    </yy-modal>
    <!--建议用饵弹框 -->
    <yy-modal v-model="showBait" title="建议用饵" @reset="resetBait" @submit="showBait = false">
      <view class="flex flex-col gap-3">
        <view class="flex text-[14px] text-[#171B24] justify-between">
          <view> 建议钓组</view>

          <view class="flex gap-1 items-center" @click="editingOptions('bait_name')">
            <image src="/static/icon_bianhji.png" mode="scaleToFill" class="size-[16px]" />
            <view class="text-[13px] text-[#919499]"> 编辑 </view>
          </view>
        </view>
        <view class="grid grid-cols-4 gap-3">
          <view
            class="col-span-1 flex justify-center items-center rounded-[18px] p-2 border border-solid relative"
            v-for="(i, k) in getBasanOptionData.bait_name"
            :key="k"
            :class="isSelected('bait_name', k) ? 'text-[#00A9AB] bg-[#E5F6F6] border-[#00A9AB]' : 'text-[#171B24] bg-[#F4F6F8] border-transparent'"
            @click="toggleMultiSelect('bait_name', k, i.id)"
          >
            <view
              class="flex absolute -top-1 -right-1 justify-end px-1 leading-none"
              v-if="i.user_id && i.isSelected"
              @click.stop="deleteBasanOption(i.id, 'bait_name')"
            >
              <u-icon name="close" color="#919499" class="" size="22"></u-icon>
            </view>

            <text class="text-[12px] line-clamp-1">{{ i.name }}</text>
          </view>
        </view>
        <view class="flex justify-between items-center">
          <view class="flex text-[14px] text-[#171B24]"> 自定义 </view>
          <!-- <view class="flex gap-1 items-center">
            <image src="/static/icon_bianhji.png" mode="scaleToFill" class="size-[16px]" />
            <view class="text-[13px] text-[#919499]"> 编辑 </view>
          </view> -->
        </view>
        <view class="flex flex-wrap gap-3 items-center">
          <view class="flex justify-center items-center rounded-[18px] px-3 py-2 bg-[#F4F6F8]" @click="add('添加建议用饵', 'bait_name')">
            <u-icon name="plus" color="#919499" size="26"></u-icon>
          </view>
        </view>
      </view>
    </yy-modal>
    <!--  -->
    <!--  -->
    <!-- 添加 -->
    <u-popup v-model="showAdd" mode="center" border-radius="14" length="80%">
      <view>
        <view class="flex flex-col gap-3 px-4 py-5">
          <view class="text-[16px] text-[#171B24] font-medium text-center"> {{ showAddObj.title }} </view>
          <view class="h-[40px] bg-[#F4F6F8] rounded-[8px] px-3 flex items-center">
            <input type="text" class="w-full h-full" :placeholder="showAddObj.title" v-model="showAddObj.value" />
            <!-- <view class="bg-[#C1C4C9] p-[1px] rounded-full">
              <u-icon name="close"></u-icon>
            </view> -->
          </view>
        </view>
        <view class="grid grid-cols-2 border-t">
          <view class="p-3 text-[16px] text-[#171B24] flex justify-center border-r" @click="closeAdd"> 取消</view>
          <view class="p-3 text-[16px] text-[#00A4A6] font-bold flex justify-center" @click="confirmAdd">确认</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        showAdd: false,
        showAddObj: {
          title: '',
          value: '',
          type: ''
        },
        showEditor: false,
        isScroll: false, // 是否滚动
        dataList: [], // 分页数据
        automatic: false, // 是否自动加载
        title: '路亚标点', // 页面标题
        navTitle: '', // 导航栏标题
        showFishSpecies: false, // 控制鱼种弹框显示
        showType: false, // 控制作钓类型弹框显示
        showFishingTeam: false, // 建议钓组
        showBait: false, // 建议用饵
        value: [], // picker-view 当前选中值
        indicatorStyle: `height: 50px;`, // picker-view 选中指示器样式

        getBasanOptionData: {},
        // 字段类型:
        // fish_species=鱼种,
        // fish_type=作钓类型,
        // rod_length=鱼竿长度,
        // fish_hook_type=鱼钩类型,
        // fish_hook_size=鱼钩大小,
        // bait_name=饵料名称,
        // bait_status=饵料状态,
        // float_type=浮漂类型,
        // fish_group=钓组
        // 多选状态管理
        multiSelectState: {
          fish_species: [], // 鱼种多选状态
          fish_type: [], // 作钓类型多选状态
          rod_length: [], // 鱼竿长度多选状态
          fish_hook_type: [], // 鱼钩类型多选状态
          bait_name: [], // 饵料名称多选状态
          bait_status: [], // 饵料状态多选状态
          float_type: [], // 浮漂类型多选状态
          fish_group: [] // 钓组多选状态
        },
        form: {
          basan_type: 2, //钓点类型:1=手竿,2=路亚
          name: '',
          description: '', // 描述
          fish_species: '', // 鱼种
          fish_type: '', // 作钓类型
          bait_name: '', // 饵料名称
          fish_group: '', // 钓组
          lng: '103.976204', // 经度
          lat: '30.622275', // 纬度
          address: '四川省成都市武侯区簇锦街道新泓道·瑞景产业园', // 地址
          location_name: '簇锦街道新泓道·瑞景产业园', // 地址
          country: '中国', // 国家
          province: '四川省', // 省
          city: '成都市', // 市
          district: '武侯区', // 区
          images: ['', '', ''], // 图片
          video: '' // 视频
        }
      }
    },
    onLoad(options) {
      this.getBasanOption()
    },

    methods: {
      getNameById(fieldType, id) {
        const dataSource = this.getDataSource(fieldType)
        const item = dataSource.find(item => item.id === id)
        return item ? item.name : ''
      },
      resetBait() {
        this.form.bait_name = ''
        this.multiSelectState.bait_name = []
      },
      resetFishingGroup() {
        this.form.fish_group = ''
        this.multiSelectState.fish_group = []
      },
      deleteVideo(e) {
        vk.confirm('是否确认删除该视频', res => {
          if (res.confirm) {
            this.form.video = ''
          }
        })
      },
      videoUpload() {
        vk.myfn
          .uploadVideo()
          .then(result => {
            this.form.video = result.url
          })
          .catch(err => {})
      },
      deleteImage(index) {
        this.form.images[index] = ''
      },
      async uploads(i) {
        try {
          const url = await vk.myfn.uploadImage({
            count: 1,
            topic: 'products'
          })
          this.form.images[i] = url
          if (i == 0) {
            this.form.thumb = url
          }
        } catch (err) {
          console.error('上传失败:', err)
        }
      },
      editingOptions(e) {
        //
        this.getBasanOptionData[e].forEach(item => {
          item.isSelected = !item.isSelected
        })
        this.getBasanOptionData = { ...this.getBasanOptionData }
        console.log('🚀 ~ editingOptions ~ this.getBasanOptionData :', this.getBasanOptionData)
      },

      fishSpeciesReset() {
        this.form.fish_species = ''
        this.multiSelectState.fish_species = []
      },
      resetFishingType() {
        this.form.fish_type = ''
        this.multiSelectState.fish_type = []
      },

      // 获取钓点选项
      async getBasanOption() {
        let res = await api.getBasanOption({
          basan_type: 2 //钓点类型:1=手竿,2=路亚
        })
        if (!res.code) return
        this.getBasanOptionData = res.data
      },
      // 新增钓点选项

      // 删除钓点选项
      async deleteBasanOption(id, type) {
        // 调用删除接口
        let res = await api.deleteBasanOption({ ids: id })
        if (!res.code) return
        vk.toast(res.msg)

        // 更新本地数据
        if (this.getBasanOptionData[type]) {
          this.getBasanOptionData[type] = this.getBasanOptionData[type].filter(item => item.id !== id)
        }

        // 更新表单数据
        this.updateFormField(type)
      },
      //重置
      resetForm(e, i) {
        this.e = false
        this.form[i] = ''
        this.multiSelectState[i] = []
      },
      // 发布钓点
      release() {
        // 创建一个新对象来避免修改原数据
        // let form = {
        //   ...this.form,
        //   images: [...this.form.images].join('|') // 创建新数组并转换为字符串
        // }
        // console.log('form==> ', form)
        let dddd = {
          basan_type: 2,
          name: '路亚11111111111',
          description:
            '描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述',
          fish_species: [94, 93],
          fish_type: 103,
          bait_name: 102,
          fish_group: 15,
          lng: '103.976204',
          lat: '30.622275',
          address: '四川省成都市武侯区簇锦街道新泓道·瑞景产业园',
          location_name: '簇锦街道新泓道·瑞景产业园',
          country: '中国',
          province: '四川省',
          city: '成都市',
          district: '武侯区',
          images:
            'https://basan.oss-cn-chengdu.aliyuncs.com/storage/products/20250609/1749465362731_Njce7afH.jpg|https://basan.oss-cn-chengdu.aliyuncs.com/storage/products/20250609/1749465365329_DMaPh6FP.jpg|https://basan.oss-cn-chengdu.aliyuncs.com/storage/products/20250609/1749465369167_fMekrbWy.jpg',
          video: 'https://basan.oss-cn-chengdu.aliyuncs.com/storage/videos/20250609/1749465371695_4SeC4HBT.mp4',
          thumb: 'https://basan.oss-cn-chengdu.aliyuncs.com/storage/products/20250609/1749465362731_Njce7afH.jpg'
        }

        api
          .addBasan(dddd)
          .then(res => {
            vk.toast(res.msg)
            if (!res.code) return
            vk.redirectTo({
              url: '/pages/index/success',
              // events: {
              //   update: data => {
              //     console.log('data==> ', data())
              //   }
              // },
              success: res => {
                res.eventChannel.emit('data', res.data.info)
              }
            })
          })
          .catch(err => {})
      },

      // 确认添加
      async confirmAdd() {
        api
          .addBasanOption({
            basan_type: 2, //钓点类型:1=手竿,2=路亚
            name: this.showAddObj.value,
            type: this.showAddObj.type
          })
          .then(result => {
            console.log('🚀 ~ confirmAdd ~ result:', result)
            this.showAddObj.value = ''
            vk.toast(result.msg)
            if (!result.code) return
            this.showAdd = false
            this.getBasanOption()
          })
          .catch(err => {})
      },
      // 关闭添加弹框
      closeAdd() {
        this.showAdd = false
        this.showAddObj.value = ''
      },

      scroll({ detail: { scrollTop } }) {
        const show = scrollTop > 60
        this.navTitle = show ? this.title : ''
        this.isScroll = show
      },
      //
      add(e, type) {
        this.showAdd = true
        this.showAddObj.title = e
        this.showAddObj.type = type
      },

      bindChange(e) {
        this.form.fish_hook_size = e.detail.value[0]
        console.log('e==> ', e.detail.value[0])
        console.log('picker-view change', this.value)
      },

      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      },
      openMap() {
        vk.myfn.chooseLocation().then(res => {
          this.form.lng = res.longitude
          this.form.lat = res.latitude
          this.form.address = res.address
          this.form.location_name = res.name
          this.form.country = '中国'
          this.form.province = res.address.match(/^(.*?省)/)?.[1] || ''
          this.form.city = res.address.match(/省(.*?市)/)?.[1] || ''
          this.form.district = res.address.match(/市(.*?区)/)?.[1] || ''
        })
      },
      isSelected(fieldType, index) {
        const selectedIndexes = this.multiSelectState[fieldType] || []
        return selectedIndexes.includes(index)
      },
      getDataSource(fieldType) {
        const dataMap = {
          fish_species: this.getBasanOptionData.fish_species || [],
          fish_type: this.getBasanOptionData.fish_type || [],
          rod_length: this.getBasanOptionData.rod_length || [],
          fish_hook_type: this.getBasanOptionData.fish_hook_type || [],
          bait_name: this.getBasanOptionData.bait_name || [],
          bait_status: this.getBasanOptionData.bait_status || [],
          float_type: this.getBasanOptionData.float_type || [],
          fish_group: this.getBasanOptionData.fish_group || []
        }
        return dataMap[fieldType] || []
      },
      updateFormField(fieldType) {
        const selectedIndexes = this.multiSelectState[fieldType] || []
        const dataSource = this.getDataSource(fieldType)

        if (dataSource && dataSource.length > 0) {
          // 获取选中的id值
          const selectedValues = selectedIndexes
            .map(index => {
              const item = dataSource[index]
              return item ? item.id : ''
            })
            .filter(value => value !== '')

          // 如果是fish_species类型,保持数组形式
          // 其他类型取第一个值
          if (fieldType === 'fish_species') {
            this.form[fieldType] = selectedValues
          } else {
            this.form[fieldType] = selectedValues[0] || ''
          }
        }
      },
      toggleMultiSelect(fieldType, index, id) {
        if (!this.multiSelectState[fieldType]) {
          this.$set(this.multiSelectState, fieldType, [])
        }
        const selectedIndexes = this.multiSelectState[fieldType]
        if (fieldType === 'fish_species') {
          const indexPosition = selectedIndexes.indexOf(index)

          if (indexPosition > -1) {
            selectedIndexes.splice(indexPosition, 1)
          } else {
            selectedIndexes.push(index)
          }
        } else {
          selectedIndexes.splice(0, selectedIndexes.length) // 清空数组
          selectedIndexes.push(index) // 添加当前选中项
        }

        this.updateFormField(fieldType)
      }
    }
  }
</script>

<style lang="scss" scoped>
  uni-modal {
    .uni-modal {
      z-index: 22222 !important;
    }
  }

  page {
    background-image: url('/static/ipgPublishHeadBackground.png') !important;
    background-repeat: no-repeat !important;
    background-size: 100% !important;
    background-position: top !important;
    background-color: #f4f6f8 !important;
  }
  input::placeholder {
    font-size: 15px;
    color: #c1c4c9;
  }
  .input-placeholder {
    font-size: 15px;
    color: #c1c4c9;
  }
  .picker-view {
    // width: 750rpx;
    height: 450rpx;
    // margin-top: 20rpx;
  }
  .item {
    line-height: 100rpx;
    text-align: center;
  }
</style>
